<!--<link rel="stylesheet" data-th-href="@{css/bootstrap/bootstrap.css}">-->
<style type="text/css">

 .tpv-schedule-event {
        display:block;
        text-overflow:ellipsis;
        overflow:hidden;
        height: 19px;
    }
    /* chaohung , 20190105 ,*/ 
    /* chaohung , 20190116 ,*/ 
    /* chaohung , 20190124 ,*/ 
    .scrollbar-inner-leftroom {
        height:585px;       
    }
    /* chaohung , 20190120 ,*/ 
    .scrollbar-inner3 {
        height:650px;       
    }    
    
    .scrollbar-inner-day {
        height:640px;       
    }   
    
</style>
<!-- chaohung , 20190109 -->
<div data-th-include="vc/meeting/meetingAdd"></div>
<div data-th-include="vc/meeting/meetingCopy"></div>
<div data-th-include="vc/meeting/meetingLock"></div>
<!-- Tpv zhongxiang.huang 20181226 add ---start--- -->
<div data-th-include="vc/meeting/meetingWechatInvite"></div>
<div class="modal fade tpv-modal" id="event-detail" data-keyboard="false" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-lg tpv-modal-dialog-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title pull-left">[[#{meeting.detail}]]<span id="meeting-detail-name"></span></h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-close tpv-btn-primary" name="save">[[#{confirm}]]</button> -->
                <button class="btn-hide"></button>
            </div>
        </div>
    </div>
</div>
<div class="card" style="padding-bottom:0px">
<!--  chaohung , 20190116 -->  
    <div class="card-block" style="padding-bottom:0px">
        <div class="col-sm-12" style="height:56px;panding-top:0px">
            <div class="btn-group pull-right">
                <button type="button" class="btn btn-warning active" data-calendar-view="month" data-th-text="#{meeting.schedule.month}" style="width:40px;"></button>
                <button type="button" class="btn btn-warning" data-calendar-view="week" data-th-text="#{meeting.schedule.week}" style="width:40px;"></button>
                <button type="button" class="btn btn-warning" data-calendar-view="day" data-th-text="#{meeting.schedule.day}" style="width:40px;"></button>
            </div>
            
            <!--  chaohung , 20190123 , using datetimepicker to choose date  -->
            <div class="btn-group pull-right" style="margin-right: 20px;">
            	<div class='input-group date' id="dateInput" style="cursor:pointer;">
                    <input type='hidden' class=form-control style="background: white;border: none;padding: 0;margin: 0;" />
                    <span class="input-group-addon" style="width: 40px;height: 40px;font-size: 14px; font-weight: 400;line-height: 1.42857143;border-radius: 4px;border: 1px solid #ccc;background-image: url('../../../img/vc/vc_calendar.png');">
                        <span class="glyphicon glyphicon-calendar"></span>                
                    </span>
                </div>
            </div>            

            <div class="btn-group pull-right" style="margin-right: 20px;">
                <button type="button" class="btn btn-primary" data-calendar-nav="prev"  data-th-text="#{meeting.schedule.prev}" ><!--<span class="zmdi zmdi-backward"></span>--></button>
                <!-- chaohung , 20190104 , today button style -->
                <button type="button" class="btn btn-default" data-calendar-nav="today" style="border: 1px solid #e1e1e1;background-color: #ffffff;height:36px"><font color="#333333">[[#{meeting.schedule.today}]]</font></button>
                <button type="button" class="btn btn-primary" data-calendar-nav="next" data-th-text="#{meeting.schedule.next}" ></button><!--<span class="zmdi zmdi-forward"></span>-->
            </div>
            <!-- chaohung , 20190104 , modify UI, title  -->
            <h3 class="page-header" style="padding-top: 14px;padding-left: 14px;color:#000;font-size:24px"></h3>
          
        </div>

        <div class="row" >
        <!-- chaohung , 20190104 , modify sch. UI , left : meeting room-->
        <!--  chaohung , 20190105 , -->        
         <!--  chaohung , 20190116 -->    	
            <div class="col-sm-2" style="padding-top:-10px;">
            <button type="button" class="btn btn-primary" data-th-text="#{meeting.booking}" onClick="booking()" style="width:88px;height:30px;padding-bottom:5px;"></button>
            
                <!-- chaohung , 20190108  -->
                <ul style="height:650px;margin-top: 5px;border: 1px solid #e1e1e1;border-radius: 5px 0 0 5px;">	
                    <li class="tpv-nav-header" data-th-text="#{meeting.schedule.select}"></li>
                    <hr width="100%" color="#e1e1e1" size="1" style="margin-top: 0px;margin-bottom: 2px;border: 0;border-top: 1px solid #eee;margin-left: 0px;margin-right: 0px;"></hr>
                    <div class="scrollbar-inner scrollbar-inner-leftroom" >      
                    	<li class="tpv-nav-item" th:each="meetingRoom:${meetingRooms}" th:value="${meetingRoom.roomId}" th:text="${meetingRoom.meetingRoomName}"></li>
                    </div>
                </ul>
                </div>            

            <div class="col-sm-10">	
                <div id="calendar"></div>
            </div>

        </div>
<!-- 
        <h4>Events</h4> -->
        <!--  <ul id="eventlist" class="nav nav-list"></ul>-->
    </div>
</div>

<script data-th-src="@{js/app/vc/meetingroom/meetingroom.js(t=${version})}"></script>
<script data-th-src="@{js/app/vc/meeting/schedule.js(t=${version})}"></script>

  <!--  chaohung , 20190105  -->
  
<script type="text/javascript">
$(function () {
	$('.scrollbar-inner').scrollbar({
        "onScroll": function(y, x){
	        
	    }
	});

	
});
</script> 
